<template>
  <div class="dialog">
    <!-- 动力柜弹窗控件 -->
    <el-dialog width="60%" :visible.sync="Dialog" @close="closeDialog" :close-on-click-modal="false">
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="../../../../../assets/img/time.png" alt="" srcset="" />
          <span class="title_time">{{ getDate() }}</span>
        </div>
        <span class="title_top">空压能耗详情</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="10">
          <kongtiao :data="name"></kongtiao>
        </el-col>
        <el-col :span="12" style="float: right">
          <el-row style="margin-top: 20%">
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当班总耗电量(kw·h)</span>
                    <span class="title_value">{{ !data.dbhdSum ? 0 : Number(data.dbhdSum).toFixed(2) }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当天总耗电量(kw·h)</span>
                    <span class="title_value">{{ !data.dthdSum ? 0 : Number(data.dthdSum).toFixed(2) }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>平均总电流(A)</span>
                    <span class="title_value">{{ !data.dlSum ? 0 : Number(data.dlSum).toFixed(2) }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当周总耗电量(kw·h)</span>
                    <span class="title_value">
                      {{ !data.dzhdSum ? 0 : Number(data.dzhdSum).toFixed(2) }}
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当月总耗电量(kw·h)</span>
                    <span class="title_value">{{ !data.dyhdSum ? 0 : Number(data.dyhdSum).toFixed(2) }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>总耗电量(kw·h)</span>
                    <span class="title_value">{{ !data.zhdl ? 0 : Number(data.zhdl).toFixed(2) }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-row style="margin-top: 10px; margin-right: 5px">
          <img src="../../../../../assets/img/sbsj.svg" alt="" srcset="" />
          <img src="../../../../../assets/img/dldy.svg" style="float: right" alt="" srcset="" />
        </el-row>
        <el-row>
          <el-table border v-loading="isLoading" :data="tableData" style="width: 100%" max-height="300">
            <el-table-column
              prop="devSn"
              sortable
              :sort-orders="['descending', 'ascending']"
              label="设备编号"
              min-width="10%"
            >
              <template slot-scope="scope">{{ scope.row.gongxu }}{{ parseInt(scope.row.devSn) }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="实时平均电流(A)">
              <template slot-scope="scope">{{ parseFloat(scope.row.avgI).toFixed(1) }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="实时平均电压(V)">
              <template slot-scope="scope">{{ parseFloat(scope.row.avgU).toFixed(1) }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当班耗电量(kw·h)">
              <template slot-scope="scope">
                <div v-if="getMycount() == 'morning'">
                  {{ parseFloat(scope.row.dthd).toFixed(1) }}
                </div>
                <div v-else>
                  {{ parseFloat(scope.row.dbhd).toFixed(1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="10%" label="当天耗电量(kw·h)">
              <template slot-scope="scope">{{ parseFloat(scope.row.dthd).toFixed(1) }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当周耗电量(kw·h)">
              <template slot-scope="scope">{{ parseFloat(scope.row.dzhd).toFixed(1) }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当月耗电量(kw·h)">
              <template slot-scope="scope">{{ parseFloat(scope.row.dyhd).toFixed(1) }}</template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import kongtiao from "../../kongtiao";
export default {
  name: "dialog_kongtiao",
  components: {
    kongtiao
  },
  data() {
    return {
      Dialog: false,
      isLoading: true,
      title: "",
      title_l: "",
      itemData: {},
      data: "",
      name: "",
      tableData: []
    };
  },

  mounted() {},
  computed: {
    dongLiNewestState() {
      return this.$store.state.dongLiNewestState;
    }
  },
  watch: {},
  methods: {
    getMycount() {
      //判断是上午还是下午+晚上
      let self = this;
      let date = new Date();
      if (date.getHours() >= 0 && date.getHours() < 12) {
        return "morning";
      } else {
        return "afternoon";
      }
    },

    // 当前时间
    getDate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      return date.year + "-" + date.month + "-" + date.date;
    },

    showDialog(data, tableData, name) {
      this.data = data;
      this.name = name;
      // this.title = this.data.title + "详情";
      this.tableData = tableData;
      this.isLoading = false;
      this.Dialog = true;
    },
    closeDialog() {
      this.tableData = [];
      this.data = {};
      this.Dialog = false;
      this.isLoading = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
.el-table {
  overflow-y: hidden !important;
}
</style>
